/**
 * Created by yongmingwei on 16/10/26.
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TextInput,
    Image,
    Platform,
    TouchableOpacity
} from 'react-native';

var Dimensions = require('Dimensions');
var {width,height} = Dimensions.get('window');
var HomeDetail = require('./WYMHomeDetail');

var Home = React.createClass({
        render() {
            return (
                <View style={styles.container}>
                    {/*导航条首页*/}
                    {this.renderNavbar()}
                    {/**/}
                    <TouchableOpacity onPress={()=>{this.pushToDetail()}}>
                        <Text style={styles.welcome}>
                            首页
                        </Text>
                    </TouchableOpacity>
                </View>
            );
        },
    renderNavbar(){
        return(
            <View style={styles.navBarStyle}>
                <TouchableOpacity onPress={()=>{this.pushToDetail()}}>
                    <Text style={styles.leftTextStyle}>广州</Text>
                </TouchableOpacity>
                <TouchableOpacity>
                    <TextInput placeholder="输入商家,品类,商圈"  style={styles.topInputStyle}/>
                </TouchableOpacity>
                <View style={styles.rightNavViewStyle}>
                    <TouchableOpacity onPress={()=>{alert('点击了')}}>
                        <Image source={{uri:'icon_homepage_message'}} style={styles.navRightImageStyle}></Image>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={()=>{alert('点击了')}}>
                        <Image source={{uri:'icon_homepage_scan'}} style={styles.navRightImageStyle}/>
                    </TouchableOpacity>
                </View>
                {/**

                 **/}
            </View>
        );
    },
    pushToDetail(){
        this.props.navigator.push({
            component:HomeDetail,
            title:'详情页'
        })
    }
});


const styles = StyleSheet.create({
    navBarStyle:{
        height:Platform.OS == 'ios'?64:44,
        backgroundColor:'rgba(255,96,0,1.0)',
        width : width,
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'space-around'
    },
    leftTextStyle:{
        color:'white',
        marginTop:Platform.OS == 'ios'?18:0,
        fontSize: 15,
    },
    rightNavViewStyle:{
        flexDirection:'row',
        height:64,
        alignItems:'center'
    },
    topInputStyle:{
        width:width * 0.7,
        backgroundColor:'white',
        height:Platform.OS == 'ios'?35:30,
        marginTop:Platform.OS == 'ios'?8:0,
        borderRadius:17,
        paddingLeft:10,
        paddingBottom:Platform.OS == 'ios'?0:5,
    },
    navRightImageStyle:{
        marginTop:Platform.OS == 'ios'?18:0,
        width:Platform.OS == 'ios'?28:24,
        height:Platform.OS == 'ios'?28:24
    },
    container: {
        flex: 1,
        backgroundColor: '#e8e8e8',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },

});

module.exports = Home;